<template>
  <div class="linecontainer">
    <select class="ysSelect" v-model="lineIndex" @change="initChart">
      <option v-for="(option, i) in lineList" :key="i" :value="i">
        {{ option.name }}
      </option>
    </select>
    <div class="nodata" v-show="nodata">暂无曲线</div>
    <div id="chart" v-show="!nodata" class="gaugeChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { parseTime } from '@/utils/index'
export default {
  props: ['lineList', 'lineChange'],
  data() {
    return {
      myChart: null,
      selected: '',
      lineIndex: 0,
      nodata: false
    }
  },

  computed: {
    curline() {
      return this.lineList[this.lineIndex]
    }
  },

  watch: {
    lineChange() {
      if (this.myChart && this.curline) {
        this.lineIndex = 0
        if (this.curline.series[0]) {
          this.initChart()
          this.nodata = false
        } else {
          this.myChart.clear()
          this.nodata = true
        }
      }
      if (this.myChart && !this.lineList.length) {
        this.myChart.clear()
        this.nodata = true
      }
    }
  },

  methods: {
    initChart() {
      if (!this.curline.series.length) return
      const data = this.curline.series[0].data
      let dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1]
      })
      let option = {
        grid: {
          top: "5%",
          left: "2%",
          right: "2%",
          bottom: "15%",
          // show: true, // 显示边框
          // borderColor: "#012f4a", // 边框颜色
          containLabel: true // 包含刻度文字在内
        },
        // Make gradient line here
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: 'rgba(50,50,50,0)',
          textStyle: {
            color: '#fff'
          },
        },

        xAxis: [
          {
            data: dateList,

            axisTick: {
              // show: false // 去除刻度线
              lineStyle: {
                color: "#fff",
              }
            },
            axisLabel: {
              color: "#4c9bfd" // 文本颜色
            },
            axisLine: {
              show: true, // 去除轴线
              lineStyle: {
                color: "#fff",
              }
            },
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
              formatter(val) {
                // console.log(val)
                return parseTime(val, '{h}:{i}')
              },
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
          }

        ],
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#FFFFFF20"
            },
          },
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          },

          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12
            }
          },
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: valueList,
            itemStyle: {
              color: "#2179FC"
            },
            lineStyle: {
              width: 2
            },
            areaStyle: {
              // opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#2481F760'
                },
                {
                  offset: 1,
                  color: '#2481F700'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
          },

        ]
      }
      this.myChart.setOption(option)
    }
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById('chart'))
    // this.initChart()
    window.addEventListener('resize', () => this.myChart.resize())
  }
}
</script>


<style lang="less" scoped>
.gaugeChart {
  width: 100%;
  height: 100%;
}

.linecontainer {
  position: relative;
  width: 100%;
  height: 100%;

  .ysSelect {
    position: absolute;
    top: -20px;
    right: 20px;
    color: #fff;
    width: 104px;
    height: 32px;
    background: #002e90;
    border-radius: 6px;
    border: 2px solid #3677ff;
    z-index: 999;
  }
}
</style>
